@require '~styles/variables'
@require '~styles-lib/mixins'

.tooltip
	display: block !important
	padding: 4px
	font-size: $tooltip-font-size
	line-height: 1.4
	z-index: $zindex-tooltip
	pointer-events: none

	.tooltip-inner
		rounded-corners()
		max-width: $tooltip-max-width
		padding: 5px 8px
		text-align: center
		color: $tooltip-color
		background-color: $tooltip-bg

	.tooltip-arrow
		display: none

	&[aria-hidden='true']
		visibility: hidden
		opacity: 0
		transition: opacity 200ms, visibility 200ms

	&[aria-hidden='false']
		visibility: visible
		opacity: 1
		// Instant in.
		transition: none
